import * as api from '../../util/api';
import React,{Component} from 'react';
import {Button ,Input ,Modal ,Pagination} from 'antd';
import axios from 'axios';
import './user.css';
import { Table, Divider, Tag } from 'antd';
export default class Dong extends React.Component {
	
  state = { visible: false , list:[] ,id:''};
  showModal = () => {
    this.setState({
      visible: true,
	 
    });
  };
  showModal1(id){
  	console.log(id)
  	
  	
  	api.idUser(id).then((data)=>{
  		console.log(data)
  		setTimeout(() => {
  			console.log(this.refs)
  			this.refs.a.value = data.data.userName
  			this.refs.b.value = data.data.nickName
  			this.refs.c.value = data.data.password
  			this.refs.d.value = data.data.avatar
  			this.refs.g.value = data.data._id
  		},1);
  		// this.refs.b.value = data.data.quantity
  		// this.refs.c.value = data.data.price
  		// this.refs.d.value = data.data.coverImg
  		// this.refs.e.value = data.data.descriptions
  		// this.refs.f.value = data.data.productCategory
  		this.setState({
  			visible1: true,
      });
  	})
  	
      
    };
  hideModal = () => {
    this.setState({
      visible: false,
	  visible1:false
    });
  };
  addModal = () => {
	  var userName = this.refs.tit.value
	  var password = this.refs.tit1.value
	  var nickName = this.refs.tit2.value
	  var avatar = this.refs.tit3.value
	  console.log(userName)
	  console.log(password)
	  console.log(nickName)
	  console.log(avatar)
	  let params = {userName,password,nickName,avatar}
	  console.log(params)
	  api.addUser(params).then((data)=>{
	  		  console.log(data.data)
	  			api.userList({per:10,page:10}).then((data)=>{
	  				console.log(data.data.users)
	  				this.setState({
	  					list:data.data.users,
						 // visible: false
	  				})
	  				
	  			})
	   })
	   this.refs.tit.value=''
	   this.refs.tit1.value=''
	   this.refs.tit2.value=''
	   this.refs.tit3.value=''
	  
  };
  addModal1 = () => {
  	var userName = this.refs.a.value
  	var nickName = this.refs.b.value
  	var password = this.refs.c.value
  	var avatar = this.refs.d.value
  	var id = this.refs.g.value
  	console.log(this.refs)
  	// console.log(name)
  	// console.log(quantity)
  	// console.log(price)
  	// console.log(coverImg)
  	// console.log(descriptions)
  	let params = {id,userName,nickName,password,avatar}
  	console.log(params)
  	api.updateUser(params).then((data)=>{
  			console.log(data)
  				api.userList({per:10,page:10}).then((data)=>{
  					console.log(data.data.users)
  					this.setState({
  						list:data.data.users,
  						visible1: false
  					})
  					
  				})
  	})
  };
 delete(id){
 	api.delUser(id).then((data)=>{
		console.log(data)
		api.userList({per:10,page:10}).then((data)=>{
			console.log(data.data.users)
			this.setState({
				list:data.data.users
			})
		})
	})
  }
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>
          添加用户
        </Button>
        <Modal
          title="添加商品"
          visible={this.state.visible}
          onOk={this.addModal}
          onCancel={this.hideModal}
          okText="确认"
          cancelText="取消"
        >
          	<p>用户名字</p>
          	<input type='text' ref='tit'/>
			<p>用户账户</p>
			<input type='text' ref='tit1'/>
          	<p>用户密码</p>
          	<input type='text' ref='tit2'/>
          	<p>用户头像</p>
          	<input type='text' ref='tit3'/>
        </Modal>
		<table style={{width:1000,height:40,border:1}}>
		      <tr>
		      <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://pic.51yuansu.com/pic3/cover/03/49/72/5bbb3dd60d8d9_610.jpg)"}}>用户名字</td>
			  <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://pic.51yuansu.com/pic3/cover/03/49/72/5bbb3dd60d8d9_610.jpg)"}}>用户账户</td>
		      <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://pic.51yuansu.com/pic3/cover/03/49/72/5bbb3dd60d8d9_610.jpg)"}}>用户密码</td>
			   <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://pic.51yuansu.com/pic3/cover/03/49/72/5bbb3dd60d8d9_610.jpg)"}}>用户头像</td>
			  <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://pic.51yuansu.com/pic3/cover/03/49/72/5bbb3dd60d8d9_610.jpg)"}}>用户编辑</td>
			  </tr>
			  </table>
			  {
			  	   this.state.list.map((item,id)=>{
			  			return(
			  				<div key={id}>
			  				<table style={{width:1000,border:1,tableLayout:'fixed'
}}>
			  				<tr>
			  				 <td style={{width: 88,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://pic.51yuansu.com/pic3/cover/03/90/76/5c1d8643e9631_610.jpg)"}}>{item.userName}</td>
			  				 <td style={{width: 88,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://pic.51yuansu.com/pic3/cover/03/90/76/5c1d8643e9631_610.jpg)"}}>{item.nickName}</td>
			  				 <td style={{width:88,overflow:'hidden',textOverflow:'ellipsis',wordBreak:'keepAll',whiteSpace:"nowrap",textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://pic.51yuansu.com/pic3/cover/03/90/76/5c1d8643e9631_610.jpg)"}}>{item.password}</td>
							 <td style={{width: 88,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://pic.51yuansu.com/pic3/cover/03/90/76/5c1d8643e9631_610.jpg)"}}><img src={item.avatar} style={{width: 50,
	height: 50}}/></td>
			  		         <td style={{width: 88,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://pic.51yuansu.com/pic3/cover/03/49/72/5bbb3dd60d8d9_610.jpg)"}}>
		<Button id={item._id} type="primary" onClick={()=>this.showModal1(item._id)}>
		修改商品
		</Button>
	    <Button type="danger" id={item._id} onClick={()=>this.delete(item._id)}>删除</Button>
			  		         </td>
			  	          </tr>
			  			</table>
			  			</div>
			  		)
			  	})
			  	}
				<Modal
				  title="修改商品"
				  visible={this.state.visible1}
				  onOk={this.addModal1}
				  onCancel={this.hideModal}
				  okText="确认"
				  cancelText="取消"
				>
					<p>id</p>
					<input tyupe='text' ref='g' disabled="disabled"/>
				  	<p>用户名字</p>
				  	<input type='text' ref='a'/>
					<p>用户账号</p>
					<input type='text' ref='b'/>
				  	<p>用户密码</p>
				  	<input type='text' ref='c'/>
				  	<p>用户头像</p>
				  	<input type='text' ref='d'/>
				</Modal>
				<br/>
				<Pagination defaultCurrent={1} total={50} />
      </div>
    );
  }
  componentDidMount(){
  	var _this=this;
  	api.userList({per:10,page:10}).then((data)=>{
  		console.log(data.data.users)
  		_this.setState({
  			list:data.data.users
  		})
  		
  	})
	
	}
	}
